<template>
  <!-- 学生虚机环境 -->
  <div id="jx-student-virtual-machine" class="jx-virtual-machine" v-loading="deskLoading" :element-loading-text="deskLoadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="jx-virtual-machine-header">
      <div class="jx-virtual-machine-header-logo fl" :title="courseName" v-text="courseName"></div>
      <!-- <div class="jx-virtual-machine-nav fl" v-show="!fullScreen">
                <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">实训手册</span>
                <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)">实训笔记</span>
            </div> -->
      <!-- 虚拟机信息 -->
      <div class="jx-virtual-machine-header-info fr">
        <span>虚拟机信息</span>
        <el-tooltip effect="light" placement="top">
          <div slot="content" v-if="VirtualMachineInfo.mode">
            模板类型：<span v-if="VirtualMachineInfo.mode == 1">单节点</span>
            <span v-else-if="VirtualMachineInfo.mode == 2">集群</span>
            <div style="line-height:20px;" v-for="(item, index) in VirtualMachineInfo.containers" :key="index">
              {{ item.containerRole }}
              <br />
              ip：{{ item.ip }}
              <br />
              配置：{{ item.flavor }}
              <br />
              镜像名称：{{ item.imageName }}
              <div style="line-height:20px;" v-for="(subItem, subIndex) in item.ports" :key="subIndex">
                端口名称：{{ subItem.portName }}
                <br />
                容器内地址：{{ subItem.port }}
                <br />
                访问地址：{{ `${subItem.ip}:${subItem.exposedPort}` }}
              </div>
            </div>
          </div>
          <div slot="content" v-else>
            暂无虚拟机信息
          </div>
          <i class="iconfont icon-jingshi"></i>
        </el-tooltip>
      </div>
      <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
        <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr" @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
      </div>
    </div>
    <div class="jx-virtual-machine-main">
      <!-- 左侧竞赛题目和报告提交 -->
      <div class="step-main-content fl" v-show="!fullScreen">
        <!-- 导航 -->
        <div class="step-main-content-nav">
          <p>
            <el-button type="primary" plain size="mini" @click="MachineNavTab(1)">竞赛题目</el-button>
            <el-button type="primary" plain size="mini" @click="MachineNavTab(2)">实验过程提交</el-button>
          </p>
          <div class="zongfen">总分<span>100分</span>
          </div>
        </div>
        <!-- 竞赛题目 -->
        <div class="competition-tab-main" v-if="activeIndex == 1">
          <div class="title-report-submission" v-if="laboratoryManualData">
            <div class="step-main-content-text">
              <div class="markdown-body" v-html="laboratoryManualData"></div>
            </div>
          </div>
          <div class="title-report-submission" v-else>
            <div class="jx-content-tips nodata-box">
              <p>暂无内容</p>
            </div>
          </div>
        </div>
        <!-- 报告提交 -->
        <div class="competition-tab-main" v-show="activeIndex == 2">
          <div class="title-report-submission">
            <!-- 报告版本导航 -->
            <div class="banben">
              <el-radio-group v-model="radio3" size="small">
                <el-radio-button label="1">word版</el-radio-button>
                <el-radio-button label="2">在线版</el-radio-button>
              </el-radio-group>
              <div class="synchronization" @click="Synchronization" v-show="radio3==2">
                <div class="el-icon-refresh"></div> 同步已提交报告
              </div>
              <div class="task-name">任务二: 离线任务处理</div>
            </div>
            <!-- 报告内容渲染 -->
            <div class="step-main-content-box">
              <!-- word版 -->
              <div class="word-page" v-show="radio3==1">
                <div class="report-down" @click="DownReport">
                  <a href=" /tes/tempfiles/评委导入模板.xlsx">报告模板下载.xls <i class="iconfont icon-tubiaozhizuo-"></i></a>
                </div>
                <div class="report-show" v-show="haveReport">
                  <div class="report">
                    <img src="./../../../assets/images/upload-success.png" />
                    <div class="report-name" ref="wordReportName">fileName</div>
                    <div class="report-tips">实验报告已上传</div>
                  </div>
                  <el-button round @click="UploadFile(1)">上传实验过程</el-button>
                </div>
                <div class="report-show" v-show="!haveReport">
                  <div class="err-tips">
                    <img src="./../../../../src/assets/images/upload-question.png" alt="">
                  </div>
                  <div class="try-tips">暂无报告</div>
                  <el-button round @click="UploadFile(1)">上传实验过程</el-button>
                </div>
              </div>
              <!-- 在线版 -->
              <!-- style="height:730px"是为了让页面不那么高，就不会出现上下滚动条 -->
              <div @mouseover="changeEditor(1)" style="height:730px">
                <mavonEditor v-show="radio3==2" id="note-editor" class="step-main-editor" ref="question" style="height:700px !important"></mavonEditor>
              </div>
            </div>
            <!-- 在线版才会显示提交 -->
            <div class="step-main-btn-group" v-show="radio3==2">
              <button class="button-style" @click="UploadReport">提交</button>
              <!-- <button @click="" class="button-style">预览</button> -->
              <!-- <button class="button-style" @click="NoteSave(1)">保存</button>
							<button @click="downloadWord" class="button-style">下载</button> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧虚机部分，功能按钮 -->
      <div class="step-main-mirror fl">
        <div class="mirror-iframe" v-if="!mirrorIframeTip">
          <template v-for="(item, index) in VirtualMachineUrlArr">
            <iframe name="iframeitem" :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==2" v-show="MachineNavTabIndex == index" :src="item.notebookUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
            <iframe name="iframeitem" :key="index" :id="'VirtualMachineIframe' + item.containerId" v-if="VirtualMachineInfo.type==1" v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe>
          </template>
          <!-- <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0" class="iframs"></iframe> -->
        </div>
        <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
          <img src="./../../../assets/images/mirror_iframe_tip.png" />
          <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
          <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
        </div>
        <!-- <div class="step-main-mirror-side" v-if="fullScreen">
                    <ul>
                        <li @click="HandbookDialog"><i class="iconfont icon-shiyongshouce"></i>手册</li>
                        <li @click="NotesDialog"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
                </div> -->
        <div class="fullSide" v-if="fullScreen">
          <ul>
            <li @click="HandbookDialog">
              <i class="iconfont icon-shiyongshouce"></i>
              <p>题目</p>
            </li>
            <li @click="NotesDialog">
              <i class="iconfont icon-ico_compile_thick"></i>
              <p>报告</p>
            </li>
          </ul>
        </div>
        <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl">
          <div class="step-main-mirror-dialog-block">
            <div class="step-main-mirror-dialog-box">
              <div class="mirror-dialog-header">
                <!-- 计时 -->
                <span>{{ downTime.hours }}:{{downTime.minutes}}:{{downTime.seconds}}</span>
                <!-- <Time :autoStart="true"></Time> -->
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="refreshVirtual(0)">
                    <i class="iconfont icon-shuaxin"></i>刷新
                  </span>
                </div>
                <div class="item-btn">
                  <span @click="InitVirtual">
                    <i class="iconfont icon-zhongxinshiyang"></i>初始化
                  </span>
                  <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                </div>
                <div class="item-btn" v-if="!fullScreen">
                  <span @click="VirtualFullScreen(2)">
                    <i class="iconfont icon-full-screen"></i>虚拟机全屏
                  </span>
                </div>
                <div class="item-btn" v-if="fullScreen">
                  <span @click="VirtualFullScreen(3)">
                    <i class="iconfont icon-full-screen"></i>退出全屏
                  </span>
                </div>
              </div>
              <div class="mirror-dialog-item" v-if="VirtualMachineInfo.type==1">
                <div class="item-btn">
                  <span @click="SftpConfig">
                    <i class="iconfont icon-upload"></i>SFTP工具
                  </span>
                </div>
                <div class="item-btn">
                  <span @click="UploadFile(2)">
                    <i class="iconfont icon-shangchuan-"></i>文件上传
                  </span>
                  <!-- <el-tooltip class="item" effect="light" content="上传文件至虚拟机/root/tools/文件夹" placement="left-end" style="position:absolute; right: -10px; top: 5px;">
                                        <i class="iconfont icon-wenti-m"></i>
                                    </el-tooltip> -->
                </div>
                <div class="item-btn" v-if="!downFlag">
                  <span @click="DownloadFile">
                    <i class="iconfont icon-tubiaozhizuo-"></i>下载文件
                  </span>
                </div>
                <div class="item-btn" v-if="downFlag" style="color:#666">
                  <b>
                    <b class="iconfont icon-tubiaozhizuo-"></b>下载文件
                  </b>
                </div>
              </div>
              <div class="mirror-dialog-item" v-if="VirtualMachineInfo.type==1">
                <div class="item-btn">
                  <span @click="ExperimentScreenshot">
                    <i class="iconfont icon-jietu1"></i>实验截图
                  </span>
                </div>
                <div class="item-btn">
                  <span @click="CutDialog">
                    <i class="iconfont icon-jietu"></i>剪切板
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
            <div>工具栏</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 实验截图 -->
    <el-dialog :close-on-click-modal="false" class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
      <div class="dialog-content clear-fix">
        <img :src="dialogScreenshotUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
        <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 学生实验手册显示隐藏 -->
    <el-dialog :close-on-click-modal="false" class="dialog-handbook" title="学生实验手册显示隐藏" :visible.sync="dialogHandbook" width="460px">
      <div class="dialog-content clear-fix">
        <p>控制该章节学生端所有实验手册显隐</p>
        <p>当前学生端实验手册为 <span>显示</span>
        </p>
        <div class="handbook-item">
          <span class="item-label">设置：</span>
          <el-radio-group>
            <el-radio label="显示"></el-radio>
            <el-radio label="隐藏"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
        <el-button class="button-style" @click="dialogHandbook = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 手册 / 竞赛题目 -->
    <el-dialog class="dialog-hand-book" style="height:520px" v-dialogDragResize title="竞赛题目" :modal="false" :close-on-click-modal="false" :visible.sync="dialogHandbookDrag" :modal-append-to-body="false">
      <div class="dialog-body">
        <div class="markdown-body" v-html="laboratoryManualData"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogHandbookDrag = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 报告编写 -->
    <el-dialog class="dialog-hand-note" style="height:520px" v-dialogDragResize title="报告编写" :modal="false" :close-on-click-modal="false" :visible.sync="dialogNotesDrag" :modal-append-to-body="false">
      <div class="dialog-body" @mouseover="changeEditor(2)">
        <mavonEditor style="height: 100%;" ref="questionDialog"></mavonEditor>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="UploadReport">确定</el-button>
      </div>
    </el-dialog>
    <!-- 实训笔记 -->
    <!-- <el-dialog class="dialog-hand-note" style="height:520px" v-dialogDragResize title="实训笔记" :modal="false" :close-on-click-modal="false" :visible.sync="dialogNotesDrag" :modal-append-to-body="false">
			<div class="dialog-body">
				<mavonEditor style="height: 100%;" ref="questionDialog"></mavonEditor>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button class="button-style" @click="NoteSave(2)">确定</el-button>
			</div>
		</el-dialog> -->
    <!-- 下载文件 -->
    <el-dialog :close-on-click-modal="false" class="dialog-download-file" title="从实验环境导出代码" :visible.sync="dialogDownload" width="480px">
      <div class="dialog-content">
        <p>将需要的代码文件放入到"/data"目录, 点击下载会把该目录打包下载。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <a @click="DownloadSave" class="button-style" style="width:90px;" :href="'/tes/experiment/training/'+trainingId+'/download'">下 载</a> -->
        <el-button class="button-style" @click="DownloadSave">下 载</el-button>
        <el-button class="button-style" @click="dialogDownload = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- SFTP -->
    <el-dialog :close-on-click-modal="false" class="sftp-dialog" title="SFTP工具" :visible.sync="dialogSftp" width="540px">
      <div class="sftp-content">
        <div class="sftp-header">
          <div class="sftp-title">
            您可以使用SFTP工具上传、下载文件:
          </div>
          <p>SFTP访问的地址为 <span>{{ sftpPort[0] }}</span> 端口号为 : <span>{{ sftpPort[1] }}</span>
          </p>
          <p>用户名 : <span>root </span> 密码 : <span>root</span>
          </p>
        </div>
        <div class="sftp-desc">
          <div class="sftp-title">
            上传工具为WinSCP
          </div>
          <div class="desc-item">
            <p>
              <img class="item-pic" src="./../../../assets/images/sftp.png" />
              <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                <i class="iconfont icon-tubiaozhizuo-">
                  <!-- <img src="./../../../assets/images/sftp_icon1.png" /> -->
                </i>
                立即下載
              </a>
              <!-- <a :href="sftpIp[1]+'/WinSCP_64-Setup.exe'">
                                <i class="iconfont icon-xiazai2">
                                    <img src="./../../../assets/images/sftp_icon2.png" />
                                </i>
                            </a> -->
            </p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogSftp = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 剪切板 -->
    <el-dialog :close-on-click-modal="false" class="cut-dialog" title="剪切板" :visible.sync="dialogCut" width="655px" @close="CutCloseDialog">
      <div class="cut-title">
        <p>
          <span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存
        </p>
      </div>
      <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
        <el-form-item prop="desc">
          <el-input type="textarea" @input="CutContentInput" maxlength="20000" v-model="cutData.cutRuleForm.desc" style="height:200px;"></el-input>
          <div class="desc-num">{{cutData.cutRuleForm.descNum}}/20000</div>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button class="button-style" @click="cutSubmitForm('cutRuleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 文件上传 -->
    <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="文件上传" :visible.sync="dialogFileUpload" width="460px" @close="CloseFileUploadDialog(1)">
      <el-form :model="FileUploadForm" :rules="FileUploadRules" ref="FileUploadForm">
        <el-form-item class="version-file">
          <el-button class="button-style">上传文件
            <input id="version-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile($event,1)">
            </input>
          </el-button>
          <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">上传文件至虚拟机/root/tools/文件夹</p>
          <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="FileUploadForm.versionFile.length>0">已选: {{FileUploadForm.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" style="width: 100px;" @click="UploadSave('FileUploadForm',1)">上传至虚机</el-button>
      </div>
    </el-dialog>
    <!-- 实验报告上传 -->
    <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="报告上传" :visible.sync="dialogReportUpload" width="460px" @close="CloseFileUploadDialog(2)">
      <el-form :model="ReportUploadForm" :rules="FileUploadRules" ref="ReportUploadForm">
        <el-form-item class="version-file">
          <el-button class="button-style">选择文件
            <input id="report-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile($event,2)">
            </input>
          </el-button>
          <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">小组成员提交会覆盖其他组员的报告</p>
          <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="ReportUploadForm.versionFile.length>0">已选: {{ReportUploadForm.versionFile}}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" style="width: 100px;" @click="UploadSave('ReportUploadForm',2)">确认上传</el-button>
      </div>
    </el-dialog>
    <!-- 关闭分享 -->
    <el-dialog :close-on-click-modal="false" class="dialog-download-file" title="关闭分享" :visible.sync="dialogCloseShare" width="460px">
      <div class="dialog-content">
        <p>是否关闭分享</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button class="button-style" @click="CloseShare">关 闭</el-button> -->
        <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 配置提示弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-config-tip" title="提示" :visible.sync="dialogConfigTip" width="460px">
      <div class="dialog-content">
        <p>虚拟机配置已被修改，点击'确定'将立即重启虚拟机。点击'取消'稍后可通过'刷新'功能重启虚拟机。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogConfigTip = false">取 消</el-button>
        <el-button class="button-style" @click="DialogConfigTip">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 初始化弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
      <div class="dialog-content">
        <p>初始化会丢失文件、数据，确定要初始化吗?</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
        <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="bigger-dialog" :visible.sync="bigger">
      <img :src="biggerImgPath">
    </el-dialog>
  </div>
</template>

<script>
import mavonEditor from '../../../components/mavonEditor'
import Time from '../../../components/Time'
//导出word
import '../../../../static/wordExport/jquery.wordexport'
import {
  postMarkdownTSCP,
  getReportTSCP,
  getTopicTSCP,
  postWordTSCP,
  SynchronousReportTSCP,
} from '@/api/competitionPlatform'
export default {
  components: {
    mavonEditor,
    Time,
  },
  data() {
    return {
      // 倒计时
      downTime: {
        hours: 0,
        minutes: 0,
        seconds: 0,
      },
      //剩余时间（数字）
      countdown: 0,
      // 报告上传弹窗
      dialogReportUpload: false,
      // 实验报告上传
      ReportUploadForm: {
        fileName: '',
        versionFile: '',
      },
      //是否有已经提交了的word报告
      haveReport: false,
      //报告版本选择
      radio3: 1,
      // 在线报告编写的内容
      liveHtmlContent: '',

      // 浏览器分辨率
      ScreenSigma: '',
      //桌面loading
      deskLoading: false,
      deskLoadingText: '桌面加載中',
      contentLoading: null,
      // 课程ID
      courseId: '',
      // 章节ID
      chapterId: '',
      //做提交时需要用到的id
      singleTaskId: '',
      // 实训ID
      trainingId: '',
      // 课程名称
      courseName: '',
      // 导航active
      activeIndex: 1,
      // 实验手册data
      experimentVideoData: '',
      laboratoryManualData: '',
      // 虚机信息
      VirtualMachineInfo: '',
      // 虚机全屏fullScreen
      fullScreen: false,
      // 虚机地址
      VirtualMachineUrl: '',
      VirtualMachineUrlArr: [],
      // 虚机当前ID数组
      VirtualMachineIdArr: [],
      // 虚机当前容器ID
      VirtualMachineId: '',
      // 虚机当前镜像ID
      VirtualImageId: '',
      iframeHeight: '',
      // 虚机切换导航列表
      virtualMachineNavList: [],
      // 虚机导航列表index
      MachineNavTabIndex: '0',
      // 虚拟机id
      containerId: '',
      toolbarsMav: {
        bold: true, // 粗体
        italic: false, // 斜体
        header: true, // 标题
        //underline: true, // 下划线
        //strikethrough: true, // 中划线
        //mark: true, // 标记
        //superscript: true, // 上角标
        //subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        help: true, // 帮助
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true, // 预览
        fullscreen: true, // 全屏编辑
      },

      // 关闭分享
      dialogCloseShare: false,
      // 实验截图
      dialogScreenshot: false,
      dialogScreenshotCopyUrl: '',
      // 实验截图url
      dialogScreenshotUrl: '',
      // 学生手册
      dialogHandbook: false,
      // 手册拖拽
      dialogHandbookDrag: false,
      // 实训笔记拖拽
      dialogNotesDrag: false,
      // 下载文件弹窗
      dialogDownload: false,
      // sftp
      dialogSftp: false,
      // Sftp ip
      sftpIp: '',
      sftpPort: '',
      sftpHost: '',
      // 剪切板dialog
      dialogCut: false,
      cutData: {
        cutRuleForm: {
          desc: '',
          descNum: 20000,
        },
        cutRules: {
          desc: [{ required: true, message: '请填写内容', trigger: 'blur' }],
        },
      },
      // 文件上传dialog
      dialogFileUpload: false,
      FileUploadForm: {
        fileName: '',
        versionFile: '',
      },
      FileUploadRules: {
        versionFile: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ],
      },
      val: '123',
      // 虚机右侧导航
      mirrorRightWidth: 0,

      // 统计删除
      DeleteWebsock: null,
      DeleteWebsockOver: null,

      // 配置提示弹窗
      dialogConfigTip: false,

      // 初始化弹窗
      dialogInitVirtual: false,

      // 错误提示
      mirrorIframeTip: false,
      mirrorIframeTipText: '',

      // 图片放大
      biggerImgPath: '',
      bigger: false,

      //是否可以下载
      downFlag: false,
    }
  },
  created() {
    let self = this
    // 课程ID
    self.courseId = 
    // 131
    self.$localstorage.getLocalStorage('setCourseId')
    // 章节ID
    // self.chapterId = self.$localstorage.getLocalStorage('chapterInfoData').chapterId
    // 提交
    self.singleTaskId =
      self.$localstorage.getLocalStorage('chapterInfoData').singleTaskId
    // 实训ID
    self.trainingId = self.$route.query.trainingId
    self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
    self.$nextTick(function () {
      self.iframeHeight = $(window).height() - 60
      $('.mirror-iframe, .step-main-mirror').width(
        (1024 / 768) * ($(window).height() - 60)
      )
      $('.jx-virtual-machine-main').height(self.iframeHeight)
      $('.step-main-content').width(
        $(window).width() - $('.step-main-mirror').width()
      )
      window.onresize = function () {
        if (self.fullScreen) {
          $('.step-main-mirror').width(
            ($(window).width() / self.iframeHeight) * self.iframeHeight
          )
          setTimeout(() => {
            $('.mirror-iframe').width($('.step-main-mirror').width() - 1)
          }, 1000)
        } else {
          self.iframeHeight = $(window).height() - 60
          $('.mirror-iframe, .step-main-mirror').width(
            (1024 / 768) * self.iframeHeight
          )
          $('.jx-virtual-machine-main').height(self.iframeHeight)
          $('.step-main-content').width(
            $(window).width() - $('.step-main-mirror').width()
          )
        }
      }
      // if(window.screen.width <= 1280){
      //     self.fullScreen = true
      //     $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
      //     setTimeout(() => {
      //         $('.mirror-iframe').width($(".step-main-mirror").width())
      //     }, 1000);
      // }

      // 设置编辑器高度
      $('.step-main-editor').css({
        height: $(window).height() - 220 + 'px',
      })
      $('.step-main-editor .v-note-wrapper').css({
        height: '100%',
        'z-index': '1',
      })
    })

    // 初始化学习手册
    self.InitManual()
    // 初始化进入实验
    self.InitExperiment(0)

    // 初始化头部信息
    self.InitHeaderInfo()

    //文件下载
    self.AssintShow()

    //获取报告
    this.GetReport()
  },
  mounted() {
    this.$refs.question.toolbars = this.toolbarsMav
    setInterval(() => {
      this.gettime()
    }, 500)
  },
  watch: {
    liveHtmlContent: function () {
      this.$refs.question.value = this.liveHtmlContent
    },
  },
  methods: {
    // 获取剩余时间
    gettime() {
      // /match/timeLeft/{courseId}
      this.$http.get(`/tes/match/timeLeft/${this.courseId}`).then((res) => {
        if (res.data.code == 200) {
          // this.countdown = res.data.data
          // this.downTime.hours = (res.data.data / 1000) % 60
          // this.downTime.minutes = (res.data.data / 1000 / 60) % 60
          this.downTime.seconds = (res.data.data / 1000 / 60 / 60) % 60
          console.log(res.data.data)
        }
      })
    },
    //左侧报告，和弹窗报告的内容存到liveHtmlContent再通过这个变量同步两个报告的内容
    changeEditor(flag) {
      //弹窗报告
      if (flag === 2) {
        this.liveHtmlContent = this.$refs.questionDialog.value
      } else {
        //左侧报告
        this.liveHtmlContent = this.$refs.question.value
      }
    },
    //上传在线版报告
    async UploadReport() {
      let liveReport = {
        courseId: this.courseId, //竞赛id
        taskId: this.singleTaskId, //任务id
        submited: true, //是否提交  true：是 false：否
        markdownContent: ' ', //markdown内容
        htmlContent: ' ', //html内容
        error: true, //当用户点击提交，需要检查是否有其他用户提交。
      }
      liveReport.markdownContent = this.liveHtmlContent
      liveReport.htmlContent = this.liveHtmlContent
      // submited为true时，第一次请求这个接口，error需要传true，
      // 如果这个接口返回200，则代表成功。
      // 如果这个接口报20001错误，需要前端展示提示框，若用户继续点击确定，代表覆盖报告，需要再次请求这个接口，error需要传false
      // 如果这个接口返回其他错误码，就抛错就行
      await postMarkdownTSCP(liveReport)
        .then((res) => {
          if (res.data.code == 200) {
            this.$alert('提交成功', '提示', {
              confirmButtonText: '确定',
            })
            return Promise.reject()
          } else if (res.data.code == 20001) {
            return this.$confirm(
              '此操作将覆盖组员提交的文件, 是否继续?',
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
          } else {
            this.$message.error(res.data.message)
            return Promise.reject()
          }
        })
        .then(() => {
          liveReport.error = false
          return postMarkdownTSCP(liveReport)
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '提交成功!',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
      // 重新获取一下报告
      this.GetReport()
    },
    //下载报告
    DownReport() {
      // //下载修改文件名
      //     downloadModel() {
      //         let that = this;
      //         //console.log(that.resQuestionData.modelPath,1111);
      //         that.$downloadfile.download(that.resQuestionData.modelPath,"实验报告模板.doc")
      //     };
      //     // 获取实验报告
      //     ExperimentalReport() {
      //         let self = this;
      //         console.log(self.roles,2);
      //         self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/report').then(response => {
      //             let res = response.data
      //             if(res.code == '200'){
      //                 self.onlineCommit = res.data.onlineCommit;
      //                 self.ReportUploadForm.fileName = res.data.reportFileName
      //                 if(self.ReportUploadForm.fileName){
      //                     self.ReportUploadForm.isUpload = true
      //                 }
      //                 self.resQuestionData = res.data
      //                 self.$nextTick(() => {
      //                     self.$refs.reportline.changeVal(res.data.reportMd)
      //                 })
      //             }else{
      //                 self.$message.error(res.message)
      //             }
      //         }).catch(err => {
      //             console.log(err)
      //         })
      //     };
    },
    // 获取报告
    GetReport() {
      getReportTSCP(this.courseId, this.singleTaskId)
        // this.$http.get('/tes/match-report?courseId=111&chapterId=4757')
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            //fileName是word文件名，htmlContent是markdown内容
            //（注：这两个字段只可能会展示一个，并且fileName不等于空的字符串，就说明，用户已上传word，如果为空的字符串，代表没有上传word）
            if (
              res.data.data.fileName != undefined &&
              res.data.data.htmlContent != ''
            ) {
              // word版本
              this.radio3 = 1
              if ((res.data.data.fileName = '')) {
                this.haveReport = false
              } else {
                this.haveReport = true
                this.$refs.wordReportName.value = res.data.data.fileName
              }
            } else if (res.data.data.htmlContent != undefined) {
              //在线版本
              this.radio3 = 2
              // this.$refs.question.value = res.data.data.htmlContent;
              this.liveHtmlContent = res.data.data.htmlContent
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 同步已提交报告
    Synchronization() {
      let data = {
        courseId: this.courseId, //竞赛id
        taskId: this.singleTaskId, //任务id
        error: true, //开启组员已提交认证
      }
      SynchronousReportTSCP(data)
        .then((res) => {
          if (res.data.code == 200) {
            this.$refs.question.value = res.data.data
            return Promise.reject('完成')
          } else if (res.data.code == 20002) {
            return this.$confirm('同步xx的报告, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
          } else {
            this.$confirm.error(res.data.message)
            return Promise.reject('错误')
          }
        })
        .then(() => {
          data.error = false
          return SynchronousReportTSCP(data)
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$refs.question.value = res.data.data
            return Promise.reject('完成')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //yx新增需求 将文件下载能变成动态值
    AssintShow() {
      let self = this
      self.$http
        .get('/tes/unauthorized/internet')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.downFlag = res.data
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    downloadWord() {
      let self = this
      $('#note-editor .v-show-content').wordExport('实验笔记')
    },
    // 统计删除socket
    InitDelectWebSocket() {
      let self = this
      let hostname = window.location.host
      const wsuri =
        'ws://' + hostname + '/tes/ws/experiment/training/' + self.trainingId
      self.DeleteWebsock = new WebSocket(wsuri)
      self.DeleteWebsock.onopen = self.Deletewebsocketonopen
      self.DeleteWebsock.onmessage = self.Deletewebsocketonmessage
      self.DeleteWebsockOver = () => {
        self.DeleteWebsock.close()
      }
    },
    Deletewebsocketonopen() {
      console.log('open sucess')
    },
    Deletewebsocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data)
      if (redata.type == 9) {
        this.dialogConfigTip = true
      }
    },
    // 初始化头部信息
    InitHeaderInfo() {
      let self = this
      self.$http
        .get('/tes/training/' + self.trainingId)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            // 课程名称
            self.courseName = res.data.trainingName
            // 章节名称
            self.chapterName = res.data.chapterName
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 初始化 //获取竞赛题目
    InitManual() {
      let self = this
      getTopicTSCP(this.courseId, this.singleTaskId)
        .then((res) => {
          if (res.code == '200') {
            self.laboratoryManualData = res.data
            self.$nextTick(() => {
              $('.markdown-body p img').on('click', function () {
                self.biggerImgPath = $(this).attr('src')
                self.bigger = true
              })
            })
          } else if (res.code == '404') {
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 配置虚拟机
    DialogConfigTip() {
      let self = this
      self.MachineNavTabIndex = 0
      self.dialogInitVirtual = false
      self.dialogConfigTip = false
      self.dialogScreenshot = false
      self.dialogHandbook = false
      self.dialogHandbookDrag = false
      self.dialogNotesDrag = false
      self.dialogDownload = false
      self.dialogSftp = false
      self.dialogCut = false
      self.dialogFileUpload = false
      self.dialogCloseShare = false
      self.InitExperiment(0)
    },
    // 初始化进入实验
    InitExperiment(index) {
      // index 虚机index
      let self = this
      self.fullScreen = false

      self.deskLoading = true
      self.deskLoadingText = '桌面加載中'
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = []
      self.virtualMachineNavList = []
      self.$http
        .get('/tes/experiment/training/' + self.trainingId)
        .then((response) => {
          let res = response.data

          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data

            // setTimeout(() => {
            //     self.iframeHeight = $(window).height() - 60
            //     $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
            //     $('.jx-virtual-machine-main').height(self.iframeHeight)
            //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            // }, 800);

            // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId
            // 虚机镜像id
            self.VirtualImageId = res.data.containers[index].imageId

            self.fullScreen = false
            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(
                res.data.containers[i].containerRole
              )
              // 如果含有全屏状态
              // if(res.data.containers[i].fullScreen){
              //     fullData.push(res.data.containers[i].containerId)
              //     self.VirtualFullScreen(1,fullData)
              // }
              fullData.push(res.data.containers[i].containerId)
            }
            if (res.data.containers[0].fullScreen && res.data.type == 1) {
              self.VirtualFullScreen(1, fullData)
            }
            if (res.data.type == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
            } else {
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
              }, 800)
            }
            setTimeout(() => {
              // 虚机地址默认设置主节点
              self.VirtualMachineUrl =
                res.data.containers[index].desktopUrl ||
                res.data.containers[index].notebookUrl

              // 虚机地址数组
              self.VirtualMachineUrlArr = res.data.containers
              if (self.VirtualMachineUrlArr.length > 0) {
                self.InitDelectWebSocket()
              }
              self.deskLoading = false
              if (self.ScreenSigma < 1.44) {
                self
                  .$confirm(
                    '系统检测到您的系统分辨率太小，是否切换到全屏模式？',
                    '提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                      closeOnClickModal: false,
                    }
                  )
                  .then(() => {
                    self.VirtualFullScreen(2)
                  })
              }
            }, 800)
          } else {
            // self.deskLoading = false
            // self.$message.error(res.message)
            // 错误提示
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // tab切换
    MachineNavTab(index) {
      let self = this
      if (index == 2) {
        // self.$http
        //   .get("/tes/training/report/" + self.trainingId)
        //   .then((response) => {
        //     let res = response.data;
        //     if (res.code == "200") {
        //       self.$refs.question.value = res.data.conTent;
        //     } else if (res.code == "404") {
        //     } else {
        //       self.$message.error(res.message);
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err);
        //   });
      }
      self.activeIndex = index
    },
    // 实训手册保存
    // NoteSave(tag) {
    //   // tag 1. 左侧实验手册2.实验手册弹窗
    //   let self = this;
    //   let data = {};
    //   //   if (tag == 1) {
    //   data.content = self.$refs.question.value;
    //   data.htmlContent = self.$refs.question.getRender();
    //   if (self.$refs.question.value == "") {
    //     self.$message.error("请填写报告");
    //     return;
    //   }
    //   //   this.UploadReport();
    //   //   } else if (tag == 2) {
    //   //     data.content = self.$refs.questionDialog.value;
    //   //     data.htmlContent = self.$refs.questionDialog.getRender();
    //   //     if (self.$refs.questionDialog.value == "") {
    //   //       self.$message.error("请填写报告");
    //   //       return;
    //   //     }
    //   //   }
    //   //   self.$http
    //   //     .post("/tes/training/report/" + self.trainingId, data)
    //   //     .then((response) => {
    //   //       let res = response.data;
    //   //       if (res.code == "200") {
    //   //         self.$message({
    //   //           message: "实训笔记保存成功",
    //   //           type: "success",
    //   //         });
    //   //         if (tag == 2) {
    //   //           // 重新初始化笔记数据
    //   //           self.$http
    //   //             .get("/tes/training/report/" + self.trainingId)
    //   //             .then((response) => {
    //   //               let res = response.data;
    //   //               if (res.code == "200") {
    //   //                 self.$refs.question.value = res.data.conTent;
    //   //               } else if (res.code == "404") {
    //   //               } else {
    //   //                 self.$message.error(res.message);
    //   //               }
    //   //             })
    //   //             .catch((err) => {
    //   //               console.log(err);
    //   //             });
    //   //         }
    //   //       } else {
    //   //         self.$message.error(res.message);
    //   //       }
    //   //     })
    //   //     .catch((err) => {
    //   //       console.log(err);
    //   //     });
    // },

    // 虚机导航列表切换
    MachineNavTab2(index, item) {
      let self = this
      self.MachineNavTabIndex = index

      self.VirtualMachineId = item.containerId
      // 重新初始化进入实验
      // self.InitExperiment(index, true)
    },
    // 刷新虚机
    refreshVirtual(index) {
      let self = this
      self.MachineNavTabIndex = index
      // 关闭手册拖拽弹窗
      self.dialogHandbookDrag = false
      self.dialogNotesDrag = false
      // 重新初始化进入实验
      // self.InitExperiment(index)

      self.deskLoading = true
      self.deskLoadingText = '桌面加載中'
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = []
      self.virtualMachineNavList = []
      self.$http
        .get('/tes/experiment/training/' + self.trainingId)
        .then((response) => {
          let res = response.data

          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            if (
              res.data.containers[0].fullScreen ||
              (res.data.type == 2 && self.fullScreen)
            ) {
              self.fullScreen = true
              //把距离加上
              $('.mirror-iframe').css('margin-left', '45px')
            }
            // 初始化虚拟机信息
            // self.VirtualMachineInfo = res.data

            // 虚机地址默认设置主节点
            self.VirtualMachineUrl =
              res.data.containers[index].desktopUrl ||
              res.data.containers[index].notebookUrl

            // 虚机地址数组
            self.VirtualMachineUrlArr = res.data.containers
            // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId
            // 虚机镜像id
            self.VirtualImageId = res.data.containers[index].imageId

            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(
                res.data.containers[i].containerRole
              )
              // 如果含有全屏状态
              // if(res.data.containers[i].fullScreen){
              //     fullData.push(res.data.containers[i].containerId)
              //     self.VirtualFullScreen(1,fullData)
              // }
              fullData.push(res.data.containers[i].containerId)
            }
            if (!res.data.containers[0].fullScreen && res.data.type == 1) {
              self.fullScreen = false
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                //把距离去掉
                $('.mirror-iframe').css('margin-left', '0')
                $('.iframs').css('margin-left', '0')
              }, 800)
            }
            if (res.data.type == 2) {
              if (self.fullScreen) {
                $('.step-main-mirror').width(
                  ($(window).width() / self.iframeHeight) * self.iframeHeight
                )
                setTimeout(() => {
                  // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                  $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                  $('.mirror-iframe').css('margin-left', '20px')
                  $('.iframs').css('margin-left', '25px')
                }, 1000)
              } else {
                setTimeout(() => {
                  self.iframeHeight = $(window).height() - 60
                  $('.mirror-iframe, .step-main-mirror').width(
                    (1024 / 768) * ($(window).height() - 60)
                  )
                  $('.jx-virtual-machine-main').height(self.iframeHeight)
                  $('.step-main-content').width(
                    $(window).width() - $('.step-main-mirror').width()
                  )
                  //把距离去掉
                  $('.mirror-iframe').css('margin-left', '0')
                  $('.iframs').css('margin-left', '0')
                }, 1000)
              }
            }
            self.deskLoading = false
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 初始化虚机
    InitVirtual(index) {
      let self = this
      self.dialogInitVirtual = true
    },
    DialogInitVirtualSave(index) {
      let self = this

      // 关闭手册拖拽弹窗
      self.dialogHandbookDrag = false
      self.dialogNotesDrag = false
      self.MachineNavTabIndex = 0
      self.VirtualMachineUrl = ''
      self.VirtualMachineUrlArr = []
      self.VirtualMachineIdArr = []
      self.virtualMachineNavList = []
      self.fullScreen = false

      self.dialogInitVirtual = false
      self.deskLoading = true
      self.deskLoadingText = '初始化中'
      self.$http
        .get('/tes/experiment/training/' + self.trainingId + '/init')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.mirrorIframeTip = false
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data

            // setTimeout(() => {
            //     self.iframeHeight = $(window).height() - 60
            //     $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
            //     $('.jx-virtual-machine-main').height(self.iframeHeight)
            //     $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            //     //把距离去掉
            //     $('.mirror-iframe').css('margin-left','0')
            //     $('.iframs').css('margin-left','0')
            // }, 800);
            // self.deskLoading = false

            // 虚机ID
            self.VirtualMachineId = res.data.containers[index].containerId

            let fullData = []
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId)
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(
                res.data.containers[i].containerRole
              )

              // 如果含有全屏状态
              // if(res.data.containers[i].fullScreen){
              //     fullData.push(res.data.containers[i].containerId)
              //     self.VirtualFullScreen(1,fullData)
              // }
            }
            if (res.data.containers[0].fullScreen && res.data.type == 1) {
              self.VirtualFullScreen(1, fullData)
            }
            if (res.data.type == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
            } else {
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  $(window).width() - $('.step-main-content').width()
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                //把距离去掉
                $('.mirror-iframe').css('margin-left', '0')
                $('.iframs').css('margin-left', '0')
              }, 800)
            }
            // self.$message({
            //     type: 'success',
            //     message: '初始化成功!'
            // })
            // if(self.ScreenSigma < 1.44){
            //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning',
            //         closeOnClickModal: false
            //     }).then(() => {
            //         self.VirtualFullScreen(2)
            //     })
            // }
            setTimeout(() => {
              // 虚机地址默认设置主节点
              self.VirtualMachineUrl =
                res.data.containers[index].desktopUrl ||
                res.data.containers[index].notebookUrl
              // 虚机地址数组
              self.VirtualMachineUrlArr = res.data.containers
              self.deskLoading = false
              self.$message({
                type: 'success',
                message: '初始化成功!',
              })
              if (self.ScreenSigma < 1.44) {
                self
                  .$confirm(
                    '系统检测到您的系统分辨率太小，是否切换到全屏模式？',
                    '提示',
                    {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                      closeOnClickModal: false,
                    }
                  )
                  .then(() => {
                    self.VirtualFullScreen(2)
                  })
              }
            }, 5000)
          } else {
            setTimeout(() => {
              self.iframeHeight = $(window).height() - 60
              $('.mirror-iframe, .step-main-mirror').width(
                $(window).width() - $('.step-main-content').width()
              )
              $('.jx-virtual-machine-main').height(self.iframeHeight)
              $('.step-main-content').width(
                $(window).width() - $('.step-main-mirror').width()
              )
            }, 800)
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 全屏
    VirtualFullScreen(index, fullData) {
      let self = this
      const loading = self.$loading({
        lock: true,
        text: '虚机切换中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/display?length='+$(window).width()+'&width='+self.iframeHeight).then(response => {
      let data = {}
      if (index == 1) {
        data = {
          containerIds: fullData,
          length: '1024',
          width: '768',
          fullScreen: false,
          contextId: self.trainingId,
        }
      } else if (index == 2) {
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: window.screen.availWidth - 60,
          width: self.iframeHeight,
          fullScreen: true,
          contextId: self.trainingId,
        }
      } else if (index == 3) {
        // 退出全屏
        // 关闭手册拖拽弹窗
        self.dialogHandbookDrag = false
        self.dialogNotesDrag = false
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: '1024',
          width: '768',
          fullScreen: false,
          contextId: self.trainingId,
        }
      }
      self.$http
        .post('/tes/experiment/container/display', data)
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            // 关闭loading
            loading.close()
            if (index == 2) {
              self.fullScreen = true
              $('.step-main-mirror').width(
                ($(window).width() / self.iframeHeight) * self.iframeHeight
              )
              setTimeout(() => {
                // $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                $('.mirror-iframe').width($('.step-main-mirror').width() - 48)
                $('.mirror-iframe').css('margin-left', '20px')
                $('.iframs').css('margin-left', '25px')
              }, 1000)
            } else if (index == 3 || index == 1) {
              self.fullScreen = false
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60
                $('.mirror-iframe, .step-main-mirror').width(
                  (1024 / 768) * ($(window).height() - 60)
                )
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $('.step-main-content').width(
                  $(window).width() - $('.step-main-mirror').width()
                )
                $('.iframs').css('margin-left', '0')
              }, 1000)
            }
          } else {
            // 关闭loading
            loading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // stfp工具
    SftpConfig() {
      let self = this
      self.$http
        .get('/tes/experiment/container/' + self.VirtualMachineId + '/ftp')
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            let sftpArr = res.data.split('@')
            self.sftpIp = sftpArr
            self.sftpPort = self.sftpIp[0].split(':')
            self.dialogSftp = true
          } else {
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 剪贴板字符限制
    CutContentInput() {
      let self = this
      let MirrorTextLength = self.cutData.cutRuleForm.desc.length
      self.cutData.cutRuleForm.descNum = 20000 - MirrorTextLength
    },
    // 剪切板弹窗
    CutDialog() {
      let self = this
      self.dialogCut = true
      self.cutData.cutRuleForm.descNum = 20000
      self.cutData.cutRuleForm.desc = ''
    },
    CutCloseDialog() {
      let self = this
      self.$refs['cutRuleForm'].resetFields()
    },
    // 剪切板表单提交
    cutSubmitForm(formName) {
      let self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = self.$loading({
            lock: true,
            text: '剪切文件提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })
          self.$http
            .post(
              '/tes/experiment/container/' +
                self.VirtualMachineId +
                '/clipboard',
              {
                content: self.cutData.cutRuleForm.desc,
                contextId: self.trainingId,
              }
            )
            .then((response) => {
              let res = response.data
              if (res.code == '200') {
                loading.close()
                self.$message({
                  type: 'success',
                  message: '保存成功!',
                })
                self.dialogCut = false
              } else {
                loading.close()
                self.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    // 文件上传弹窗显示
    UploadFile(flag) {
      let self = this
      // flag=2是虚拟机右侧文件上传， flag=1是左侧实验报告上传
      if (flag === 1) {
        self.ReportUploadForm.fileName = ''
        self.ReportUploadForm.versionFile = ''
        self.dialogReportUpload = true
        $('#report-upload').val('')
      } else {
        self.FileUploadForm.fileName = ''
        self.FileUploadForm.versionFile = ''
        self.dialogFileUpload = true
        $('#version-file-upload').val('')
      }
    },
    // 文件上传清除上传提示文本
    CloseFileUploadDialog(flag) {
      let self = this
      // flag=1是虚拟机右侧文件上传， flag=2是左侧实验报告上传
      if (flag === 1) {
        self.FileUploadForm.fileName = ''
        $('#version-file-upload').val('')
      } else {
        self.ReportUploadForm.fileName = ''
        $('#report-upload').val('')
      }
    },
    // 上传文件
    getFile($event, flag) {
      let self = this
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
      let fileType = $event.target.files[0].name
      fileType = fileType.substring(
        fileType.lastIndexOf('.') + 1,
        fileType.length
      )
      if (!isLt2M) {
        self.$message.error('上传文件大小不能超过 500MB!')
        return false
      }
      // flag=1是虚拟机右侧文件上传， flag=2是左侧实验报告上传
      if (flag === 1) {
        self.FileUploadForm.fileName = $event.target.files[0]
        self.FileUploadForm.versionFile = $event.target.files[0].name
      } else {
        self.ReportUploadForm.fileName = $event.target.files[0]
        self.ReportUploadForm.versionFile = $event.target.files[0].name
      }
    },
    // 保存上传文件
    UploadSave(form, flag) {
      // flag=1是虚拟机右侧文件上传， flag=2是左侧实验报告上传
      let self = this
      if (flag == 1) {
        if (self.FileUploadForm.fileName == '') {
          self.$message.error('请上传文件')
          return
        }
        self.contentLoading = self.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        let formData = new FormData()
        formData.append('file', self.FileUploadForm.fileName)
        self.$http
          .post(
            '/tes/experiment/container/' + self.VirtualMachineId + '/upload',
            formData,
            { headers: { 'Content-Type': 'multipart/form-data' } }
          )
          .then((response) => {
            let res = response.data
            if (res.code == '200') {
              self.$message({
                message: '上传成功',
                type: 'success',
              })
              self.dialogFileUpload = false
              self.contentLoading.close()
              self.$refs[form].resetFields()
            } else {
              self.contentLoading.close()
              self.$message.error(res.message)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        if (self.ReportUploadForm.fileName == '') {
          self.$message.error('请先选择报告')
          return
        }
        self.contentLoading = self.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })

        let formData = new FormData()
        formData.append('file', self.ReportUploadForm.fileName)
        formData.append('courseId', this.courseId)
        formData.append('taskId', this.singleTaskId)
        formData.append('error', true)
        postWordTSCP(formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
          .then((res) => {
            if (res.data.code == 200) {
              self.$alert('提交成功', '提示', {
                confirmButtonText: '确定',
              })
              self.dialogReportUpload = false
              self.contentLoading.close()
              self.$refs[form].resetFields()
              return Promise.reject()
            } else if (res.data.code == 20001) {
              return self.$confirm(
                '此操作将覆盖组员提交的文件, 是否继续?',
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                }
              )
            } else {
              self.contentLoading.close()
              self.$message.error(res.data.message)
              return Promise.reject()
            }
          })
          .then(() => {
            formData.error = false
            return postWordTSCP(formData, {
              headers: { 'Content-Type': 'multipart/form-data' },
            })
          })
          .then((res) => {
            if (res.data.code == 200) {
              self.$message({
                type: 'success',
                message: '提交成功!',
              })
              self.dialogReportUpload = false
              self.contentLoading.close()
              self.$refs[form].resetFields()
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },

    // 实验截图
    ExperimentScreenshot() {
      let self = this
      var vir = document.getElementById(
        'VirtualMachineIframe' + self.VirtualMachineId
      )
      self.dialogScreenshotUrl = self
        .convertCanvasToImage(
          vir.contentWindow.document.getElementsByTagName('canvas')[0]
        )
        .getAttribute('src')

      self.$http
        .post('/tes/base64/file-save', {
          base64Info: self.dialogScreenshotUrl,
        })
        .then((response) => {
          let res = response.data
          if (res.code == '200') {
            self.dialogScreenshotCopyUrl = res.data
            self.dialogScreenshot = true
          }
        })
    },
    convertCanvasToImage(canvas) {
      let image = new Image()
      image.crossOrigin = 'anonymous'
      image.src = canvas.toDataURL('image/png')
      return image
    },
    // 实验截图复制
    dialogScreenshotCopy() {
      let self = this
      var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
      clipboard.on('success', (e) => {
        self.$message({
          message: '复制成功，请在编辑器粘贴',
          type: 'success',
        })
        self.dialogScreenshot = false
        e.clearSelection()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 实验截图保存下载图片
    dialogScreenshotSave() {
      let self = this
      self.downloadFile('截图.png', self.dialogScreenshotUrl)
    },
    // 下载
    downloadFile(fileName, content) {
      let aLink = document.createElement('a')
      let blob = this.base64ToBlob(content) //new Blob([content]);

      let evt = document.createEvent('HTMLEvents')
      evt.initEvent('click', true, true) //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName
      aLink.href = URL.createObjectURL(blob)

      // aLink.dispatchEvent(evt);
      aLink.dispatchEvent(
        new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window,
        })
      )
    },
    // base64转blob
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length

      let uInt8Array = new Uint8Array(rawLength)

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },

    // 下载文件
    DownloadFile() {
      let self = this
      self.dialogDownload = true
    },
    // 下载文件确定
    // DownloadSave() {
    //     let self = this
    //     self.dialogDownload = false
    //     const loading = self.$loading({
    //         lock: true,
    //         text: '正在下载',
    //         background: 'rgba(0, 0, 0, 0.7)'
    //     })
    //     self.$http.get('/tes/experiment/training/'+self.trainingId+'/download',
    //         {responseType: 'blob'}) .then((response) => {
    //         let blob = new Blob([response.data], {type: response.headers['content-disposition']});
    //         var str = response.headers['content-disposition']
    //         str = str.match(/''(\S*?).zip/)[1]
    //         let fileName = decodeURI(str)+'.zip'
    //         let url = window.URL.createObjectURL(blob);
    //         let downloadElement = document.createElement('a');
    //         downloadElement.style.display = 'none';
    //         downloadElement.href = url;
    //         downloadElement.download = fileName; //下载后文件名
    //         document.body.appendChild(downloadElement);
    //         downloadElement.click(); //点击下载
    //         document.body.removeChild(downloadElement); //下载完成移除元素
    //         window.URL.revokeObjectURL(url);
    //         loading.close()
    //     }).catch(err => {
    //           console.log(err)
    //     })
    // },
    // 下载文件确定
    DownloadSave() {
      let self = this
      self.dialogDownload = false
      const loading = self.$loading({
        lock: true,
        text: '正在下载',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      self.$http
        .get('/tes/experiment/training/' + self.trainingId + '/zip')
        .then((response) => {
          let res = response.data
          if (res.code == 200) {
            loading.close()
            // self.DownLoadZip()
            let downloadElement = document.createElement('a')
            downloadElement.style.display = 'none'
            downloadElement.href =
              '/tes/experiment/training/' + self.trainingId + '/download'
            document.body.appendChild(downloadElement)
            downloadElement.click() //点击下载
          } else {
            loading.close()
            self.$message.error(res.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    DownLoadZip() {
      let self = this
      self.$http
        .get('/tes/experiment/training/' + self.trainingId + '/download', {
          responseType: 'blob',
        })
        .then((response) => {
          let blob = new Blob([response.data], {
            type: response.headers['content-disposition'],
          })
          var str = response.headers['content-disposition']
          str = str.match(/''(\S*?).zip/)[1]
          let fileName = decodeURI(str) + '.zip'
          let url = window.URL.createObjectURL(blob)
          let downloadElement = document.createElement('a')
          downloadElement.style.display = 'none'
          downloadElement.href = url
          downloadElement.download = fileName //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(url)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    HandbookDialog() {
      let self = this
      self.dialogHandbookDrag = true
      self.$nextTick(() => {
        $('.markdown-body p img').on('click', function () {
          self.biggerImgPath = $(this).attr('src')
          self.bigger = true
        })
      })
    },
    // 实训笔记弹窗
    NotesDialog() {
      let self = this
      self.dialogNotesDrag = true
      self.$nextTick(() => {
        self.$refs.questionDialog.toolbars = self.toolbarsMav
        self.$refs.questionDialog.value = self.liveHtmlContent
      })
      // self.$http
      //   .get("/tes/training/report/" + self.trainingId)
      //   .then((response) => {
      //     let res = response.data;
      //     if (res.code == "200") {
      //       self.$nextTick(() => {
      //         self.$refs.questionDialog.value = res.data.conTent;
      //       });
      //     } else if (res.code == "404") {
      //     } else {
      //       self.$message.error(res.message);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    //消息通知
    NoteSelect() {
      let self = this
    },
    greet(val) {
      this.val = val
    },
    // 虚机右侧菜单显示隐藏
    MirrorArrowFn() {
      let self = this
      if (self.mirrorRightWidth == -144) {
        self.mirrorRightWidth = 0
      } else {
        self.mirrorRightWidth = -144
      }
    },
  },
}
</script>
<style scoped>
.el-dialog__wrapper {
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2);
}
/* 全屏下的样式 */
.fullSide {
  height: 100%;
  padding: 0 10px;
  background: #e5e4e5;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #cfcfce;
}
.fullSide ul {
  margin-top: 60px;
}
.fullSide li {
  text-align: center;
  margin: 37px 0;
  cursor: pointer;
}
.fullSide li i {
  color: #989898;
  font-size: 16px;
}
.fullSide li p {
  color: #989898;
  margin-top: 5px;
  font-size: 12px;
}
.fullSide li:hover p {
  color: #727272;
}
.fullSide li:hover i {
  color: #727272;
}
</style>

<style lang="scss">
@import './../../../styles/layout/color_variables';
.el-notification.right {
  right: 144px;
}
#jx-student-virtual-machine {
  position: relative;
  height: 100%;
  overflow: hidden;
  .competition-tab-main {
    .title-report-submission {
      width: 100%;
      background: $white;
      padding: 20px;
      box-sizing: border-box;
      .banben {
        display: flex;
        align-items: flex-end;
        .synchronization {
          color: #409eff;
          margin-left: 10px;
          &:hover {
            color: #385899;
            cursor: pointer;
          }
        }
        .task-name {
          flex: 1;
          text-align: end;
          font-size: 16px;
          color: gray;
          float: right;
        }
      }
      .step-main-content-box {
        .word-page {
          position: relative;
          width: 100%;
          height: 600px;
          .report-down {
            float: right;
            color: #409eff;
            margin: 30px 0 0 0;
            &:hover {
              color: #385899;
              cursor: pointer;
            }
          }
          .report-show {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            .report {
              .report-name {
              }
              .report-tips {
                margin-top: 10px;
              }
            }
            .err-tips {
              font-size: 20px;
            }
            .try-tips {
              margin-top: 20px;
            }
            .el-button {
              margin-top: 20px;
            }
          }
        }
      }
    }
  }
  .jx-content-tips {
    text-align: center;
    margin-top: 100px;
    padding-top: 0;
    box-shadow: none;
    & > p {
      margin: 30px 0;
      color: #9999;
      font-size: 16px;
    }
  }
  .jx-content {
    width: 100%;
    min-height: 600px;
  }
  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      .el-button {
        width: 90px;
      }
    }
  }
  .jx-virtual-machine-header {
    height: 60px;
    line-height: 60px;
    background: #101937;
    color: $white;
    .jx-virtual-machine-header-logo {
      margin-left: 40px;
      font-size: 16px;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      margin-top: 30px;
    }
    .jx-virtual-machine-nav {
      margin: 20px 0 0 30px;
      float: left;
      height: 40px;
      line-height: 40px;
      span {
        width: 90px;
        color: $white;
        cursor: pointer;
        text-align: center;
        border-radius: 5px 5px 0 0;
        transition: 0.3s;
        // &:hover{
        //     background: $white;
        //     color: #101937;
        // }
        &.active {
          background: $white;
          color: #101937;
        }
      }
    }
    .jx-virtual-machine-nav2 {
      width: 50%;
      float: right;
      @extend .jx-virtual-machine-nav;
    }
    .jx-virtual-machine-header-info {
      margin-right: 40px;
      height: 60px;
      span {
        vertical-align: top;
        color: #bbb;
      }
      i {
        font-size: 18px;
        margin-left: 12px;
        cursor: pointer;
        vertical-align: -webkit-baseline-middle;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .jx-virtual-machine-main {
    position: relative;
    width: 100%;
    height: 100%;
    background: $white;
    overflow: hidden;
    .step-main-content {
      height: 100%;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        width: 5px;
        height: 0;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
      }
      .step-main-content-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        padding-bottom: 0px;
        p {
          display: flex;
          .el-button {
            width: 100px;
            height: 30px;
          }
        }
        .zongfen {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #3c3c3c;
          line-height: 23px;
          margin-right: 6px;
        }
      }
      .step-main-content-text {
        width: 100%;
        background: $white;
        margin-top: 10px;
        .display-hide-btn {
          float: right;
          margin: 10px 10px 20px 0;
        }
      }
      .step-main-btn-box {
        overflow: hidden;
        padding: 12px 16px 15px 15px;
        text-align: right;
        i {
          color: #385899;
          font-size: 16px;
          line-height: 16px;
          vertical-align: top;
          cursor: pointer;
        }
      }
      .step-main-btn-group {
        text-align: center;
        margin-top: 20px;
        button {
          width: 90px;
          &:first-child {
            // background: $btn-blue;
            // color: #fff;
            margin-right: 5px;
          }
        }
      }
    }
    .step-main-mirror {
      position: relative;
      width: 65%;
      height: 100%;
      // overflow-x: auto;
      // &::-webkit-scrollbar {
      //     width: 6px;
      // }
      // &::-webkit-scrollbar-thumb {
      //     background: #4d5368;
      //     border-radius: 6px;
      // }
      .mirror-iframe {
        border-left: 1px solid rgba(0, 0, 0, 0.07);
      }
      .mirror-iframe-tip {
        text-align: center;
        img {
          margin-top: 20%;
        }
        .mirror-iframe-tip-text {
          display: block;
          font-size: 16px;
          color: #727272;
          margin: 28px 0 18px;
        }
      }
      .step-main-mirror-dialog {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 144px;
        box-sizing: border-box;
        background: #2e2f33;
        transition: 0.3s;
        .step-main-mirror-dialog-block {
          height: 100%;
          overflow-x: scroll;
          padding: 0 24px;
          &::-webkit-scrollbar {
            width: 3px;
            height: 0;
          }

          &::-webkit-scrollbar-thumb {
            background: $white;
          }
        }
        .mirror-dialog-header {
          font-size: 14px;
          line-height: 18px;
          color: $white;
          padding: 20px 0;
          h2 {
            font-weight: normal;
            font-size: 16px;
            margin-bottom: 10px;
          }
          span {
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            vertical-align: bottom;
          }
        }
        .mirror-dialog-item {
          border-top: solid 1px rgba(255, 255, 255, 0.3);
          padding: 15px 0;
          .item-btn {
            position: relative;
            line-height: 40px;
            font-size: 14px;
            color: $white;

            span {
              cursor: pointer;
              &:hover {
                color: #1277eb;
              }
            }
            i {
              // float: left;
              width: 22px;
              text-align: left;
              // margin-right: 5px;
              display: inline-block;
              vertical-align: -webkit-baseline-middle;
              &.icon-guanbifenxiang {
                font-size: 14px;
              }
              &:hover {
                color: #1277eb;
              }
            }
          }
          .el-button {
            position: absolute;
            bottom: 30px;
            right: 30px;
          }
        }
      }
      .step-main-mirror-arrow {
        position: absolute;
        top: 20%;
        right: 144px;
        width: 22px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #2e2f33;
        border-radius: 4px 0 0 4px;
        padding: 5px 0;
        cursor: pointer;
        transition: 0.2s;
        div {
          color: #fff;
          font-size: 14px;
          width: 22px;
          line-height: 26px;
          // &:after{
          //     content: '\003C';
          // }
          // &.active{
          //     &:after{
          //         content: '\003E';
          //     }
          // }
        }
      }
      .step-main-mirror-side {
        position: absolute;
        bottom: 50px;
        right: 150px;
        // width: 240px;
        height: 60px;
        background: #1c1f21;
        color: $white;
        text-align: center;
        border-radius: 5px;
        z-index: 2;
        li {
          float: left;
          width: 60px;
          height: 36px;
          display: block;
          font-size: 12px;
          margin-top: 14px;
          position: relative;
          cursor: pointer;
          border-right: solid 1px #353636;
          box-sizing: border-box;
          &:hover {
            color: #dfdfdf;
          }
          &:last-child {
            border-right: none;
          }
          .iconfont {
            display: block;
            margin-bottom: 2px;
            font-size: 20px;
          }
        }
      }
    }
  }
  //分享
  .dialog-share {
    .button-style {
      width: 90px;
    }

    .dialog-content {
      .share-item {
        width: 280px;
        height: 28px;
        line-height: 28px;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        color: $title-gray;
        margin-top: 20px;
        span {
          float: left;
          width: 210px;
          border-right: solid 1px #e8e8e8;
          padding-right: 38px;
          text-align: right;
          box-sizing: border-box;
        }
        .el-switch {
          float: left;
          margin: 4px 0 0 30px;
        }
      }
    }
  }
  //分享桌面
  .dialog-share-desktop {
    .share-desktop-item {
      margin-bottom: 35px;
      &:last-child {
        margin-bottom: 0;
      }
      .item-label {
        float: left;
        width: 155px;
        height: 32px;
        line-height: 32px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 8px;
      }
    }
  }
  //实验截图
  .dialog-screenshot {
    .dialog-content {
      img {
        width: 763px;
        height: 440px;
      }
    }
  }
  //学生手册
  .dialog-handbook {
    p {
      font-size: 14px;
      color: $title-gray;
      text-align: center;
      line-height: 48px;
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .handbook-item {
      .item-label {
        float: left;
        width: 155px;
        height: 48px;
        line-height: 48px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 17px;
      }
    }
  }
  //手册拖拽
  .dialog-hand-book {
    position: absolute; /*定位*/
    top: 20%;
    left: 40%;
    width: 800px;
    overflow: hidden;
    .v-note-wrapper {
      height: 100%;
    }
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      height: 100%;
      margin-top: 0 !important;
      .el-dialog__body {
        width: 100%;
        box-sizing: border-box;
        top: 46px;
        bottom: 60px;
        overflow-x: scroll;
        padding: 0 20px;
        position: absolute;
        &::-webkit-scrollbar {
          width: 5px;
          height: 0;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
        }
        .dialog-body {
          // height: 365px;
          padding: 10px 0;
        }
      }

      .el-dialog__footer {
        left: 0;
        width: 100%;
        position: absolute;
        bottom: 0;
        padding: 0 20px 10px;
      }
    }
  }
  // 实验笔记拖拽
  .dialog-hand-note {
    position: absolute; /*定位*/
    top: 30%;
    left: 30%;
    width: 800px;
    overflow: hidden;
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      height: 100%;
      margin-top: 0 !important;
      .el-dialog__body {
        box-sizing: border-box;
        overflow: auto;
        position: absolute;
        top: 46px;
        bottom: 90px;
        width: 100%;
        .dialog-body {
          height: 100%;
          .v-note-wrapper {
            height: 100%;
          }
        }
      }

      .el-dialog__footer {
        position: absolute;
        bottom: 0;
        width: 100%;
      }
    }
  }
  //sftp上传弹窗样式
  .sftp-dialog {
    .el-dialog__body {
      padding: 38px 50px 30px;
    }
    .sftp-content {
      .sftp-header {
        border-bottom: solid 2px #dfdfdf;
        padding-bottom: 25px;
        margin-bottom: 25px;
        p {
          span {
            color: #5281c6;
          }
        }
      }
      p {
        font-size: 16px;
        line-height: 30px;
      }
      .sftp-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .sftp-desc {
        p {
          span {
            padding: 5px 10px;
            border-radius: 5px;
            background: #eeeeee;
            font-size: 14px;
            margin: 0 5px;
          }
          i {
            margin-left: 5px;
            color: #5281c6;
            position: relative;
            &:last-child {
              margin-left: 40px;
            }
            img {
              position: absolute;
              right: -28px;
              top: -20px;
            }
          }
        }
        .desc-item {
          margin-top: 30px;
          height: 60px;
          .item-pic {
            float: left;
          }
          a {
            float: left;
            font-size: 14px;
            margin-top: 12px;
            i {
              font-size: 18px;
              vertical-align: sub;
              margin-left: 24px;
            }
          }
          // overflow-y: scroll;
          // &::-webkit-scrollbar {
          //     width: 3px;
          // }

          // &::-webkit-scrollbar-thumb {
          //     background: #5281c6;
          // }
        }
      }
    }
  }
  //实训项目制作剪切板
  .cut-dialog {
    .cut-title {
      margin-bottom: 15px;
      p {
        font-size: 14px;
        span {
          font-size: 16px;
        }
      }
    }
    .el-form {
      .el-form-item {
        .el-form-item__content {
          height: auto;
        }
        .desc-num {
          float: right;
          margin-top: 170px;
          color: #bbb;
        }
        .el-textarea {
          float: left;
          width: 85%;
          textarea {
            height: 200px;
            resize: none;
          }
          .el-textarea__inner {
            min-height: 200px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 5px;
            }

            &::-webkit-scrollbar-thumb {
              background: #6589ae;
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
  // 上传流程
  .common-tool-dialog {
    .el-input {
      float: left;
    }
    .version-file {
      padding: 0 40px;
      .el-form-item {
        margin-bottom: 0;
      }
      .el-button {
        float: left;
        position: relative;
        background: #1277eb;
        color: #fff;
        border-radius: 5px;
        width: 100px;
        height: 36px;
        line-height: 36px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        cursor: pointer;
        span {
          display: block;
          cursor: pointer;
        }
      }
      input {
        position: absolute;
        width: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #cc281a;
        opacity: 0;
        cursor: pointer;
      }
    }
  }
  // 学生手册显隐
  .dialog-display-hide {
    .el-table .blue-row {
      background: #f5f7fb;
    }
  }
  // 镜像保存弹窗
  .dialog-mirror-save {
    .el-form {
      .el-form-item {
        position: relative;
        .el-form-item__content {
          height: auto;
        }
        .el-input {
          .el-input__inner {
            width: 230px;
          }
        }
        .el-textarea {
          height: 180px;
          .el-textarea__inner {
            width: 600px;
            resize: none;
          }
        }
      }
    }
    .distribution-swpier {
      position: relative;
      width: 700px;
      height: 64px;
      margin-bottom: 35px;
      margin-left: 55px;
      margin-top: 15px;
      .swiper-btn {
        background-image: none;
        outline: 0;
        top: 46px;
        i {
          font-size: 20px;
          color: #b1b1b1;
          &:hover {
            color: #474747;
          }
        }
      }
      .swiper-button-prev {
        left: -35px;
      }
      .swiper-button-next {
        right: -35px;
      }
    }
    .distribution-box {
      position: relative;
      width: 100%;
      height: 64px;
      line-height: 64px;
      background: #fff;
      border: solid 1px #d9d9d9;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      box-sizing: border-box;
      img {
        width: 100%;
      }
      &:hover {
        border-color: #1277eb;
      }
      i {
        position: absolute;
        bottom: 28px;
        right: 8px;
        font-size: 14px;
        color: #3fdb9b;
        width: 14px;
        height: 14px;
      }
    }
  }
  // 图片放大

  .bigger-dialog {
    .el-dialog {
      width: min-content;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      background: transparent;
      text-align: center;
    }
  }
}
</style>
